<?php 
$cdnUrl='http://lin.mei94.com/h5/';
if ('localhost' == $_SERVER['HTTP_HOST']){
	$cdnUrl='./';
}
$v=2;
?><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>德尔地板-奇遇系列</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<style>
html,body{width:100%;font-size:12px;font-family:Helvetica,Tahoma, Arial, STXihei,Microsoft YaHei, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;}
body{background:#ffffff;-webkit-overflow-scrolling: touch;overflow-scrolling: touch;overflow:hidden;}
body, div{margin:0;padding:0;}
-webkit-touch-callout:none;
-webkit-user-select:none;
html{-ms-touch-action:none;}
div,img{-webkit-tap-highlight-color:rgba(0,0,0,0);}
*{-webkit-text-size-adjust: none;}
.simg{position:absolute;display:block;}
a{text-decoration:none;}
.txt{position:absolute;text-indent:4px;color:#787c7f;font-size:12px;z-index:2;border:none;background:transparent;}
.txt::-webkit-input-placeholder{text-align:left;color:#a2a2a2;}
select{position:absolute;color:#787c7f;display:block;background:transparent;border:0px;text-indent:4px;font-size:12px;-webkit-appearance:none;}
.container{position:relative;width:100%;height:auto;overflow:hidden;}
.page{position:absolute;width:100%;height:100%;}
.p1{position:absolute;width:100%;height:100%;}
.thebg{position:absolute;width:100%;top:0;left:0;}
.hide{display:none;}
.animated{animation-duration: 1s;animation-fill-mode: both;}
.animated.infinite{animation-iteration-count: infinite;}
.animated.delay-1s {animation-delay: 1s;}
.tobg{position:absolute;width:100%;height:100%;background:#fff;}
.s1, .s3, .s4, .scolor{background:#faf0e4;}
.s13{background:#e0e0e0;}
.logo, .p1-logo, .p3-t3{position:absolute;top:0;left:0;z-index:2;}
.p1-t1, .p1-t2, .sl-t{position:absolute;width:100%;top:0;left:0;}
.p1-t3{position:absolute;width:100%;bottom:0;left:0;}
.s2-top{position:absolute;width:100%;height:25%;top:0;left:0;background:#faf0e4;}
.flipbook-viewport{opacity:0;}
</style>
<link rel="stylesheet" type="text/css" href="css/basic.css?v=1"/>
</head><body>
<div class="flipbook-viewport">
<div class="container">
    <div class="flipbook">
      <div class="swiper-slide">
         <div class="tobg s1"></div>
         <img class="p1-t2" src="<?php echo $cdnUrl ?>qiyu/p1-t2.png" />
         <img class="p1-logo" src="<?php echo $cdnUrl ?>qiyu/logo.png" />
         <img class="p1-t3" src="<?php echo $cdnUrl ?>qiyu/p1-t3.png" />
         <div class="thebg">
             <img class="p1-t1" src="<?php echo $cdnUrl ?>qiyu/p1-t1.png" />
         </div>
      </div>
      <div class="swiper-slide">
         <div class="s2-top"></div>
         <img class="logo" src="<?php echo $cdnUrl ?>qiyu/logo.png" />
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>qiyu/p2.jpg?v=<?php echo $v ?>" />
         </div>
      </div>
      <div class="swiper-slide">
         <div class="tobg s3"></div>
         <img class="logo" src="<?php echo $cdnUrl ?>qiyu/logo.png" />
         <img class="p3-t3" src="<?php echo $cdnUrl ?>qiyu/p3-t1.png" />
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>qiyu/p3.jpg?v=<?php echo $v ?>" />
         </div>
      </div>
      <div class="swiper-slide">
         <div class="tobg scolor"></div>
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>qiyu/p4.jpg?v=<?php echo $v ?>" />
         </div>
      </div>
      <div class="swiper-slide">
         <div class="tobg scolor"></div>
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>qiyu/p5.jpg?v=<?php echo $v ?>" />
         </div>
      </div>
      <div class="swiper-slide">
         <div class="tobg scolor"></div>
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>qiyu/p6.jpg?v=<?php echo $v ?>" />
         </div>
      </div>
      <div class="swiper-slide">
         <div class="tobg scolor"></div>
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>qiyu/p7.jpg?v=<?php echo $v ?>" />
         </div>
      </div>
      <div class="swiper-slide">
         <div class="tobg scolor"></div>
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>qiyu/p8.jpg?v=<?php echo $v ?>" />
         </div>
      </div>
      <div class="swiper-slide">
         <div class="tobg scolor"></div>
     
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>qiyu/p9.jpg?v=<?php echo $v ?>" />
         </div>
      </div>
      <div class="swiper-slide">
         <div class="tobg scolor"></div>
   
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>qiyu/p10.jpg?v=<?php echo $v ?>" />
         </div>
      </div>
      <div class="swiper-slide">
         <div class="tobg scolor"></div>
         
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>qiyu/p11.jpg?v=<?php echo $v ?>" />
         </div>
      </div>
      <div class="swiper-slide">
         <div class="tobg scolor"></div>
         <img class="logo" src="<?php echo $cdnUrl ?>qiyu/logo.png" /> 
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>qiyu/p12.jpg?v=<?php echo $v ?>" />
         </div>
      </div>
      <div class="swiper-slide">
         <div class="tobg s13"></div>
         <div class="thebg">
             <img class="sl-t" src="<?php echo $cdnUrl ?>qiyu/p13.jpg?v=<?php echo $v ?>" />
         </div>
      </div>
      

  </div>
</div>

</div>
<div style="display:none;">
  <audio id="music" loop="loop"><source src="http://lin.mei94.com/h5/m.mp3"  type="audio/mpeg"></audio>
</div>
<script src="http://mat1.gtimg.com/libs/jquery2/2.1.4/jquery2.min.js"></script>
<script src="<?php echo $cdnUrl ?>js/pxloader-images.min.js"></script>
<script src="<?php echo $cdnUrl ?>js/modernizr.2.5.3.min.js?v=2"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
theH=h= Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var sWidth = parseInt((window.innerWidth > 0) ? window.innerWidth : screen.width);
if(sWidth>750){sWidth=750;}
var _rate=(sWidth/750);
if(h<_rate*1334){h=_rate*1334;}
var _img=['logo.png'];
var loader = new PxLoader();
for(var i=0; i<_img.length; i++){loader.addImage('<?php echo $cdnUrl ?>qiyu/'+_img[i]);}
var _music=document.getElementById("music");
loader.start();
loader.addCompletionListener(function(e){
	$(".flipbook-viewport").addClass("fade-in").css({"opacity":1});
	   _music.play(); 
	   document.addEventListener("WeixinJSBridgeReady", function () { _music.play(); }, false);
});

$(function(){
	$('body').on('touchmove',function(e){
		//e.preventDefault();
	});
	$('.sl-t').width(sWidth).height(_rate*1334);
	$('.swiper-container').width(sWidth).height(h);
	$('.s1-en').width(_rate*181).height(_rate*65).css({"top":0, "right":0});
	
	$('.logo, .p1-logo').width(_rate*336).height(_rate*122);
	$('.p3-t3').width(_rate*385).height(_rate*146).css({"top":_rate*182, "left":0});
	
	$('.p18-t1').width(_rate*586).height(_rate*392);
	$('.p24-t1').width(_rate*590).height(_rate*307);

	 
	//iphoneX  h=724   _rate= 0.5
	//iphoneX  _rate*1334=667
	if(theH > _rate*1334){
        var _cha= h - _rate*1334;
        $('.thebg').css({"top":_cha/2});
        $('.logo').css({"top":_cha/2.6});
     }else{
    	 var _cha=_rate*1334 - theH;
    	 $('.logo').css({"top": -5});
    	 $('.p3-t3').width(_rate*300).height(_rate*114).css({"top":_rate*100, "left":_rate*66});
    	 $('.thebg, .p1-t2').css({"top":-_cha});
     }
	 yepnope({test : Modernizr.csstransforms,yep: ['js/m.js?v=1'],complete: loadApp});

});
</script>
</body></html>